<template>
    <div class="con">
        <div class="header">
            <img src="../assets/images/icon.png" alt class="icon">
            <img src="../assets/images/toutu.png" alt class="toutu">
        </div>
        <div class="form">
            <input
                type="text"
                class="phone"
                placeholder="请输入11位数字的手机号"
                v-model="phone"
                oninput="if(this.value.length>11) this.value = this.value.slice(0,11);"
                pattern="[0-9]*"
            >
            <div class="yzmbox">
                <input
                    type="text"
                    class="yzm"
                    placeholder="请输入验证码"
                    v-model="authCode"
                    pattern="[0-9]*"
                >
                <button @click="send()" id="yzm">发送验证码</button>
            </div>
            <input class="phone" type="password" placeholder="请设置登录密码" v-model="password">
            <div class="btn" @click="ok()">
                <button>手机APP申请</button>
            </div>
            <p>
                申请表示已同意
                <span @click="server()">《卡宝钱包用户服务协议》</span>
            </p>
        </div>

          <van-dialog v-model="show" show-cancel-button @confirm="confirmOk">
                <div class="dialog">
                    <p>您之前的申请已通过！</p>
                    <p>立即安装app拿钱！</p>
                </div>
            </van-dialog>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            phone: "",
            authCode: "",
            timestamp: "",
            code: "",
            promoteId:"",
            password:"",
            type: 1,
            show: false
        };
    },
    methods: {
        server() {
            this.$router.push({ name: "privacy" });
        },
         confirmOk() {
            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                 window.location ="https://itunes.apple.com/cn/app/id1457665026";
            } else {
                window.location = "http://pda.aixuepai.com.cn:8060/kbUpdate/Download/kb.apk";
            }
        },
        send() {
            var filterphone = /^1\d{10}$/;
            if (this.phone == "") {
                this.$toast("手机号不能为空");
            } else if (filterphone.test(this.phone) == false) {
                this.$toast("手机号格式错误");
            } else {
                var yzm = document.getElementById("yzm");

                var clock = "";
                var nums = 60;
                yzm.disabled = true; //将按钮置为不可点击
                yzm.style.opacity = "0.5";
                yzm.innerHTML = nums + "s";
                clock = setInterval(doLoop, 1000); //一秒执行一次
                function doLoop() {
                    nums--;
                    if (nums > 0) {
                        yzm.innerHTML = nums + "s";
                    } else {
                        clearInterval(clock); //清除js定时器
                        yzm.disabled = false;
                        yzm.style.backgroundColor = "#ff724f";
                        yzm.style.opacity = "1";

                        yzm.innerHTML = "获取验证码";
                        nums = 60; //重置时间
                    }
                }
                this.axios({
                    method: "post",
                    url: `${
                        this.siteUrl
                    }/app/authCode/getCode?appid=web.2019&format=json&timestamp=${
                        this.timestamp
                    }`,
                    data: {
                        authType: 1,
                        phone: this.phone
                    }
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.success == 1) {
                            this.$toast(response.data.message);
                        } else {
                             if (response.data.code == "2003") {
                        //弹框
                        this.show = true;
                    } else {
                        this.$toast(res.data.message);
                    }
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$toast("连接服务器异常");
                    });
            }
        },
        ok() {
            var filterphone = /^1\d{10}$/;
            if (this.phone == "") {
                this.$toast("手机号不能为空");
            } else if (filterphone.test(this.phone) == false) {
                this.$toast("手机号格式错误");
            } else if (this.authCode == "") {
                this.$toast("验证码不能为空");
            }else if (this.password == "") {
                this.$toast("登录密码不能为空");
            }  else {
                 var md5pwd = this.md5(
                    `${this.md5(this.password)}${this.password}`
                );
                this.axios({
                    method: "post",
                    url: `${
                        this.siteUrl
                    }/app/login/h5/register?appid=web.2019&format=json&timestamp=${
                        this.timestamp
                    }`,
                    data: {
                        loginName: this.phone,
                        authCode: this.authCode,
                        code: this.code,
                        promoteId:this.promoteId,
                        type: this.type,
                        password: md5pwd,
                    }
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.success == 1) {
                            if (
                                /(iPhone|iPad|iPod|iOS)/i.test(
                                    navigator.userAgent
                                )
                            ) {
                                localStorage.setItem("kbphone", this.phone);

                                window.location =
                                    "https://itunes.apple.com/cn/app/id1457665026";
                            } else {
                                window.location =
                                    "http://pda.aixuepai.com.cn:8060/kbUpdate/Download/kb.apk";
                            }
                        } else {
                            this.$toast(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$toast("连接服务器异常");
                    });
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.code = this.$route.query.code;
        this.promoteId=this.$route.query.userId;

          //移动端的input键盘弹框bug
        var inputArr = document.getElementsByTagName("input");
        for (var i = 0; i < inputArr.length; i++) {
            inputArr[i].onblur = function() {
                console.log("1");
                setTimeout(function() {
                    window.scrollTo(0, 0);
                }, 100);
            };
        }
        // if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        //     if (localStorage.getItem("kbphone") !== null)
        //         setTimeout(() => {
        //             window.location =
        //                 "https://itunes.apple.com/cn/app/id1457665026";
        //         }, 1000);
        // }


          //  判断设备
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            this.type = 1;
        } else if (/(Android)/i.test(navigator.userAgent)) {
            this.type = 2;
        } else {
            this.type = 3;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #ffae4e;
}

.header .icon {
    width: 102px;
    height: 22px;
    position: absolute;
    left: 15px;
    top: 18px;
}
.header .toutu {
    width: 100%;
}
.form {
    width: 100%;
    height: 200px;

    margin-top: -180px;
}
.form .phone {
    width: 80%;
    height: 44px;
    margin-left: 10%;
    border-radius: 26px;
    text-indent: 24px;
}
.form .yzmbox {
    margin-top: 15px;
     margin-bottom: 15px;
}
.form .yzm {
    width: 50%;
    height: 44px;
    margin-left: 10%;
    border-radius: 26px;
    text-indent: 24px;
}
.form .yzmbox button {
    width: 28%;
    height: 44px;
    background: #ff724f;
    margin-left: 2%;
    border-radius: 26px;
    color: #fff;
}
.btn button {
    width: 80%;
    height: 44px;
    margin-left: 10%;
    border-radius: 26px;
    color: #fff;
    margin-top: 24px;
    background: #ff724f;
}
p {
    text-align: center;
    margin-top: 15px;
}
p span {
    color: #4c70ff;
}
</style>
